<template>
  <table>
    <thead>
      <tr>
        <th v-for="(value, k) in headInfo" :key="k">
          {{ value }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td v-for="(value, k) in headInfo" :key="k">
          {{ item[k] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data () {
    return {
      headInfo: {
        id: "序号",
        age: "年龄",
        name: "姓名",
      }, // key
      data: [
        { // item
          id: 1,
          name: "zhangsan",
          age: 18,
        },
        {
          id: 2,
          name: "lisi",
          age: 21,
        },
        {
          id: 3,
          name: "wangwu",
          age: 32,
        },
        {
          id: 4,
          name: "liuliu",
          age: 22,
        },
      ],
    };
  },
};
</script>
